<template>
  <div class="public">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="公开咨询" url="/pages/my/my" />
    <div class="none" v-show="condition">
      <image class="none-img" :src="imgBaseUrl + 'none.png'" mode="widthFix" />
    </div>
    <div class="item" v-for="(item, index) in itemList" :key="index">
      <div class="answer">
        <text>{{item.reply_count}}</text>位律师回答
      </div>
      <div class="question">{{item.problem}}</div>
      <div class="hybrid">
        <div class="categroy">{{item.main_title}}</div>
        <div class="time">{{item.createtime}}</div>
      </div>
      <navigator :url="'/pageMy/menu/leaveWord?id='+item.id" class="nav" >
        <view>查看详情</view>
        <view class="iconfont icon-qianjin"></view>
      </navigator>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [],
      page: 1,
      length: 0, // 每次请求数据的长度
      imgBaseUrl: this.$store.state.imgBaseUrl,
      condition: false
    };
  },
  async created() {
    const res = await this.$gh
      .request("member.order", {
        data: {
          op: "getOrderList",
          service_type: 0,
          page: 1
        }
      })
      .catch(err => {
        if (err.code == 41009) {
          this.$store.dispatch("login", err.message);
        }
        if(err.code == 201){
          this.condition = true
        }
      });
    this.itemList = res.data.list;
    this.length = res.data.list.length;
  },
  async onReachBottom() {
    const that = this;
    if (this.length < 20) return;
    const res = await this.$gh.request("member.order", {
      data: {
        op: "getOrderList",
        service_type: 0,
        page: that.page++
      }
    });
    this.itemList = this.itemList.concat(res.data.list)
    this.length = res.data.list.length;
  }
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.none {
  font-size: 30rpx;
  color: @font-color;
  text-align: center;
  .none-img{
    width: 50%;
    margin-top: 100rpx;
  }
}
.public {
  .item {
    padding: 23rpx 23rpx 0;
    background-color: #fff;
    margin-top: 12rpx;
    .answer {
      font-size: 24rpx;
      color: @font-color;
      text {
        color: red;
      }
    }

    .question {
      font-size: 30rpx;
      color: @deep-color;
      padding: 15rpx 0;
    }

    .hybrid {
      .flex();
      font-size: 24rpx;
      color: @font-color;
      padding-bottom: 26rpx;
      border-bottom: 1px solid #eee;
      .categroy {
        padding: 5rpx;
        border: 1px solid @font-color;
        margin-right: 36rpx;
      }
    }

    .nav {
      .gh-center();
      padding: 26rpx 0;
      font-size: 30rpx;
      color: @font-color;
      .iconfont.icon-qianjin {
        height: 35rpx;
        font-size: 26rpx;
        line-height: 35rpx;
        margin-top: 5rpx;
        margin-left: 5rpx;
      }
    }
  }
}
</style>